Angular JS Custom Service
Creating custom services in AngularJS makes it possible to add business logic, data manipulation, or other reusable functionality to your application.
Here's how you can create and use custom services,
Defining a Custom Service
Using service method
You can create custom service using service method in Angular JS program
// service method for create custom service
angular.module("myApp", [])
.service("Calculate", function(){
// custom service method for add two number
this.Addition = function(a, b){
return a+b;
};
// custom service method for subtract two number
this.Subtract = function(a, b){
return a-b;
};
// custom service method for multiply two number
this.Multiply = function(a, b){
return a*b;
};
// custom service method for divide two number
this.Division= function(a, b){
return a/b;
}
});In the example above
Calculateis the name of custom service.this.Addition,this.Subtract,this.Multiply, andthis.Divisionare the method defined in the service that are accessible outside the service.
Injecting Dependencies
If your service depends on other services or utilities, put them in the service as parameters.
Also, Read: What is built-in services in AngularJS?
Using Custom Services
Once defined, you can inject and use custom services in controllers, directives, or other applications,
angular.module("myApp", [])
.controller("myController", function($scope, Calculate){
// take two integer variable and assign value
$scope.value1 = 20;
$scope.value2 = 5;
// assign result returned by custom service methods
$scope.AddisionRes = Calculate.Addition($scope.value1, $scope.value2);
$scope.SubtractRes = Calculate.Subtract($scope.value1, $scope.value2);
$scope.MultiplyRes = Calculate.Multiply($scope.value1, $scope.value2);
$scope.DivisionRes = Calculate.Division($scope.value1, $scope.value2);
})Example-
Here is a simplified example of using a custom service (Calculate) in AngularJS,
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Custom Service Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- bootstrap cdn -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- angular js cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body data-ng-controller="myController">
<div class="container my-4">
<div class="row">
<div class="cols">
<h3>Custom Service Example</h3>
<p>Addition of two numbers : <span class="fw-semibold">{{AddisionRes}}</span></p>
<p>Subtraction of two numbers : <span class="fw-semibold">{{SubtractRes}}</span></p>
<p>Multiplication of two numbers : <span class="fw-semibold">{{MultiplyRes}}</span></p>
<p>Division of two numbers : <span class="fw-semibold">{{DivisionRes}}</span></p>
</div>
</div>
</div>
<script>
angular.module("myApp", [])
.controller("myController", function($scope, Calculate){
// take two integer variable and assign value
$scope.value1 = 20;
$scope.value2 = 5;
// assign result returned by custom service methods
$scope.AddisionRes = Calculate.Addition($scope.value1, $scope.value2);
$scope.SubtractRes = Calculate.Subtract($scope.value1, $scope.value2);
$scope.MultiplyRes = Calculate.Multiply($scope.value1, $scope.value2);
$scope.DivisionRes = Calculate.Division($scope.value1, $scope.value2);
})
// service method for create custom service
.service("Calculate", function(){
// custom service method for add two number
this.Addition = function(a, b){
return a+b;
};
// custom service method for subtract two number
this.Subtract = function(a, b){
return a-b;
};
// custom service method for multiply two number
this.Multiply = function(a, b){
return a*b;
};
// custom service method for divide two number
this.Division= function(a, b){
return a/b;
}
});
</script>
</body>
</html>Output-
Creating custom services in AngularJS provides a structured way to organize and share code in your application, improves modularity and makes it easier to develop complex web applications
Also, Read: Custom Filters in AngularJS
Leave Comment